<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content {
            background-color: white;
            border-radius: 15px;
            padding: 15px;
        }

        .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" action="" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学生姓名:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">学号:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="sid" placeholder="请输入学号" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">班级:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="cid" placeholder="请输入班级号" autocomplete="off" class="layui-input">
                    </div>

                </div>
                <button  id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button  id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                    <i class="layui-icon layui-icon-fonts-clear"></i>
                    清空条件
                </button>
            </div>
        </fieldset>
    </form>
    <table id="table-stu" lay-filter="table-stu-filter"></table>
</div>
<script type="text/html" id="convertGroup">
    {{#
    return d.group.gname;
    }}
</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script type="text/html" id="table-stu-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>
<script type="text/html" id="col-stu-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">

    function refreshTable() {
        $("#form-reset").click();
        $("#btn-search").click();

    }

    // var ctxPath = [@[/]];
    layui.use(['laydate', 'table', 'form'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        //表格头部工具栏事件监听
        table.on('toolbar(table-stu-filter)', function(obj){
            if (obj.event === "add") {
                layer.open({
                    type: 2,
                    title: "新增员工",
                    area: ['80%', '80%'],
                    shadeClose: true,
                    content: 'stu/add/ui'
                });
            } else if (obj.event === "delete") {
                let checkStatus = table.checkStatus('table-stu');
                //如果没有选中数据
                if (checkStatus.data.length === 0) {
                    layer.alert('未选中任何数据', {icon: 2, anim:6 ,title: "警告"});
                    return false;
                }

                //选中的id
                let idArr = new Array();
                $(checkStatus.data).each(function () {
                    idArr.push(this.sid);
                });

                layer.confirm('请确认删除选中的记录', {icon: 3, title:'确认'}, function (index) {
                    let url = "stu/" + idArr.join(",");
                    let params = {
                        _method: "DELETE"
                    }
                    $.post(url, params, function (response) {
                        if (response.code === 0) {
                            layer.msg(response.message, {icon: 1});
                            refreshTable();
                        } else {
                            layer.msg(response.message, {icon: 2, anim: 6})
                            refreshTable();
                        }
                    });
                    layer.close(index);
                });
            }
        });

        table.render({
            elem: '#table-stu'
            // ,height: 312
            , url: 'stu/list' //数据接口
            , page: true //开启分页
            , toolbar: "#table-stu-toolbar"
            , limits:[3,5,10,20,50,100,200,500]
            , cols: [[ //表头
                {type: "checkbox", width: 60}
                , {field: 'sid', title: '学号', width: 200, sort: true, align: 'center'}
                , {field: 'username', title: '姓名', width: 130, align: 'center'}
                , {field: 'sex', title: '性别', width: 130, align: 'center'}
                , {field: 'snum', title: '题量', width: 130, sort: true, align: 'center'}
                , {field: 'sflag', title: '是否为组长', width: 170, align: 'center' , templet: function(d){if(d.sflag == 1){return '是'}else{return '不是'}}}
                , {field: 'group', title: '小组', width: 150, sort: true, align: 'center',templet:'#convertGroup'}
                , {field: 'cid', title: '班级' ,width: 300 , align: 'center'}
                , {title: '操作', width: 235, align: 'center', toolbar: '#col-stu-toolbar'}
            ]]
        });

        form.on('submit(btn-search-filter)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            table.reload('table-stu', {
                where: { //设定异步数据接口的额外参数，任意设
                    username: data.field.username,
                    sid: data.field.sid,
                    cid: data.field.cid
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        table.on('tool(table-stu-filter)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            if (layEvent === 'del') {
                layer.confirm('请确认删除该学生: ' + data.username + ' ?', {icon: 3, title:'确认'}, function (index) {
                    let url = "stu/" + data.sid;
                    let params = {
                        _method: "DELETE"
                    }
                    $.post(url, params, function (response) {
                        if (response.code === 0) {
                            layer.msg(response.message, {icon: 1});
                            refreshTable();
                        } else {
                            layer.msg(response.message, {icon: 2, anim: 6})
                            refreshTable();
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    title: "编辑员工",
                    area: ['80%', '80%'],
                    shadeClose: true,
                    content: 'stu/' + data.sid
                });
            }
        });
    });
</script>
</body>
</html>